<template>
  <div class="profile-view min-h-screen bg-gray-50">
    <div class="container mx-auto py-8 px-4">
      <!-- Profile Header -->
      <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <div class="flex items-center space-x-4">
          <div class="relative">
            <img 
              :src="userInfo?.avatarUrl || 'https://picsum.photos/seed/user/100/100'" 
              :alt="userInfo?.nickName"
              class="w-20 h-20 rounded-full object-cover border-4 border-purple-100"
              @error="handleImageError"
            />
            <div class="absolute bottom-0 right-0 bg-purple-500 rounded-full p-2 cursor-pointer hover:bg-purple-600 transition-colors">
              <el-icon class="text-white" size="14"><Camera /></el-icon>
            </div>
          </div>
          <div class="flex-1">
            <h1 class="text-2xl font-semibold text-gray-800 mb-1">{{ userInfo?.nickName || userInfo?.username }}</h1>
            <p class="text-gray-500 text-sm">{{ userInfo?.realName }}</p>
            <div class="flex items-center mt-2 space-x-4">
              <span class="text-sm text-gray-500">
                <el-icon><Clock /></el-icon>
                注册于 {{ formatDate(userInfo?.createTime || '') }}
              </span>
              <span class="text-sm text-gray-500">
                <el-icon><View /></el-icon>
                地区: {{ userInfo?.areaName }}
              </span>
            </div>
            <div class="mt-2 text-sm text-gray-500 space-y-1">
              <!-- <p class="flex items-center gap-2">
                <span class="text-gray-400">联系电话:</span>
                {{ userInfo?.phone }}
              </p> -->
              <p class="flex items-center gap-2">
                <span class="text-gray-400">企业编号:</span>
                {{ userInfo?.erpBusinessId }}
              </p>
              <p class="flex items-center gap-2">
                <span class="text-gray-400">详细地址:</span>
                {{ userInfo?.address }}
              </p>
              <div class="flex items-center gap-4 mt-2">
                <el-tag size="small" :type="userInfo?.isPres === 'Y' ? 'success' : 'info'">
                  {{ userInfo?.isPres === 'Y' ? '处方药经营' : '非处方药经营' }}
                </el-tag>
                <el-tag size="small" type="warning" v-if="userInfo?.status === 1">正常经营</el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Main Content -->
      <div class="flex gap-6">
        <!-- Left Sidebar -->
        <div class="w-64 flex-shrink-0">
          <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            <div class="p-4 bg-gradient-to-r from-purple-500 to-blue-500">
              <h2 class="text-white font-medium">个人中心</h2>
            </div>
            <el-menu
              :default-active="activeMenu"
              class="border-none"
              @select="handleMenuSelect"
            >
              <el-menu-item index="/profile/password">
                <el-icon><Lock /></el-icon>
                <span>修改密码</span>
              </el-menu-item>
              <el-menu-item index="/profile/footprints">
                <el-icon><FootprintIcon /></el-icon>
                <span>我的足迹</span>
              </el-menu-item>
              <el-menu-item index="/profile/favorites">
                <el-icon><Star /></el-icon>
                <span>我的收藏</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>

        <!-- Right Content -->
        <div class="flex-1 bg-white rounded-lg shadow-sm">
          <router-view v-slot="{ Component }">
            <transition 
              name="fade" 
              mode="out-in"
              @before-enter="beforeEnter"
              @enter="enter"
              @after-enter="afterEnter"
            >
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Lock, Star, Camera, Clock, View } from '@element-plus/icons-vue'
import FootprintIcon from '@/components/icons/FootprintIcon.vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 使用 storeToRefs 来保持响应性
const { userInfo } = storeToRefs(userStore)

const activeMenu = computed(() => route.path)

// 获取用户信息
async function fetchUserInfo() {
  try {
    await userStore.fetchUserInfo()
  } catch (error) {
    ElMessage.error('获取用户信息失败')
    console.error('Error fetching user info:', error)
  }
}

onMounted(() => {
  fetchUserInfo()
})

function handleMenuSelect(index: string) {
  router.push(index)
}

function formatDate(date: string) {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// Transition hooks
function beforeEnter(el: Element) {
  ;(el as HTMLElement).style.opacity = '0'
  ;(el as HTMLElement).style.transform = 'translateY(20px)'
}

function enter(el: Element, done: () => void) {
  ;(el as HTMLElement).style.transition = 'all 0.3s ease-out'
  setTimeout(() => {
    ;(el as HTMLElement).style.opacity = '1'
    ;(el as HTMLElement).style.transform = 'translateY(0)'
    done()
  }, 50)
}

function afterEnter(el: Element) {
  ;(el as HTMLElement).style.transition = ''
}

// 图片加载失败处理
function handleImageError(e: Event) {
  const target = e.target as HTMLImageElement
  if (target) {
    target.src = '/src/assets/images/avatar-placeholder.png'
  }
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item.is-active) {
  background: linear-gradient(to right, #f3f4f6, #ffffff);
  border-right: 3px solid #8b5cf6;
  color: #8b5cf6;
}

:deep(.el-menu-item:hover) {
  background: linear-gradient(to right, #f3f4f6, #ffffff);
}

:deep(.el-menu-item .el-icon) {
  font-size: 18px;
}
</style> 